<template>
  <div>
    <el-form :disabled="disableElement" :model="cityBusinessApprovalFormDatas" :rules="rules" label-width="150px"
      ref="applyForm" style="width: 70%; margin-left: 15%">
      <el-form-item label="审批意见" prop="CityBusinessApprovalComment" :required="isAgree">
        <el-input type="textarea" v-model="cityBusinessApprovalFormDatas.CityBusinessApprovalComment" />
      </el-form-item>
      <el-form-item label="常用意见" v-if="showCommonComments" prop="CityBusinessCommonComments">
        <!--        <el-select-->
        <!--          style="width: 100%"-->
        <!--          v-model="cityBusinessApprovalFormDatas.CityBusinessCommonComments"-->
        <!--          placeholder="请选择常用意见"-->
        <!--          @change="cityBusinessCommonCommentsSelected"-->
        <!--        >-->
        <!--          <el-option-->
        <!--            v-for="dict in cityMangerAdviceList"-->
        <!--            :key="dict.dictValue"-->
        <!--            :label="dict.dictLabel"-->
        <!--            :value="dict.dictLabel"-->
        <!--          ></el-option>-->
        <!--        </el-select>-->
        <el-tag style="margin-left: 5px" v-for="tag in cityMangerAdviceList" :key="tag.dictLabel"
          @click="cityBusinessCommonCommentsSelected">
          {{ tag.dictLabel }}
        </el-tag>
      </el-form-item>
      <el-form-item label="审批结果" prop="CityBusinessApprovalResult">
        <el-radio-group v-model="cityBusinessApprovalFormDatas.CityBusinessApprovalResult"
          @change="cityBusinessApprovalResultSet">
          <el-radio :label="1">同意</el-radio>
          <el-radio :label="2">不同意</el-radio>
        </el-radio-group>
      </el-form-item>

      <div v-if="showFormBtn" style="
            width: 30%;
            margin-left: 35%;
            display: flex;
            justify-content: space-between;
          ">
        <el-button type="primary" size="mini" @click="submitForm">提交</el-button>
        <el-button size="mini" @click="resetForm">重置</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getDicts } from "../../../api/system/dict/data";

export default {
  props: [
    "cityBusinessApprovalFormData",
    "showFormBtn",
    "disableElement",
    "showCommonComments",
  ],
  data() {
    const notAgree = (rule, value, callback) => {
      if (this.isAgree && value == "") {
        callback(new Error("审批意见不能为空"));
      } else {
        callback();
      }
      /* if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      } */
    };

    return {
      cityBusinessApprovalFormDatas: this.cityBusinessApprovalFormData,
      isAgree: false,
      cityMangerAdviceList: [],
      rules: {
        CityBusinessApprovalResult: [
          {
            required: true,
            message: "审批结果不能为空",
            trigger: "blur",
          },
        ],
        CityBusinessApprovalComment: [
          {
            validator: notAgree,
            trigger: ['blur', 'change'],
          },
        ],
      },
    };
  },
  created() {
    getDicts("cityMangerAdvice").then((res) => {
      this.cityMangerAdviceList = res.data;
    });
    if (this.cityBusinessApprovalFormDatas.CityBusinessApprovalResult == 2) {
      this.isAgree = true;
    } else {
      this.isAgree = false;
    }

  },
  methods: {
    //常用意见选择框change事件
    cityBusinessCommonCommentsSelected(e) {
      this.cityBusinessApprovalFormDatas.CityBusinessCommonComments =
        e.target.innerText;
      if (
        this.cityBusinessApprovalFormDatas.CityBusinessApprovalComment.length ==
        0
      ) {
        this.cityBusinessApprovalFormDatas.CityBusinessApprovalComment =
          e.target.innerText;
      } else {
        this.cityBusinessApprovalFormDatas.CityBusinessApprovalComment =
          this.cityBusinessApprovalFormDatas.CityBusinessApprovalComment +
          "\n" +
          e.target.innerText;
      }
    },
    /** 清空表单 */
    resetForm() {
      //请空数据
      this.cityBusinessApprovalFormDatas = {
        CityBusinessApprovalResult: 1,
        CityBusinessApprovalComment: "",
        CityBusinessCommonComments: "",
      };
      this.isAgree = false;
      this.$refs.applyForm.clearValidate();
    },
    submitForm() {
      if (this.cityBusinessApprovalFormDatas.CityBusinessApprovalResult == 1) {
        this.$refs.applyForm.validate((valid) => {
          if (!valid) return false;
          // 触发sumit事件
          const params = {
            formType: "CityBusinessApprovalForm",
            formData: this.cityBusinessApprovalFormDatas,
          };
          this.$emit("submit", params);
          return true;
        });
      } else {
        this.$refs.applyForm.validateField(
          "CityBusinessApprovalComment",
          (valid) => {
            if (valid == "审批意见不能为空") return false;
            const params = {
              formType: "CityBusinessApprovalForm",
              formData: this.cityBusinessApprovalFormDatas,
              noAgree: 1,
            };
            this.$emit("submit", params);
            return true;
          }
        );
      }
    },
    /** 地市业务审批结果变化 */
    cityBusinessApprovalResultSet() {
      if (this.cityBusinessApprovalFormDatas.CityBusinessApprovalResult == 1) {
        this.cityTelecomApprovalRules = this.rules;
        this.isAgree = false;
      } else {
        this.isAgree = true;
        this.cityTelecomApprovalRules = [];
        //this.$refs["applyForm"].resetFields();
        this.cityBusinessApprovalFormDatas.CityBusinessApprovalResult = 2;
      }
    },
  },
};
</script>
